﻿@page "/autocomplete"
@page "/docs/guides/components/autocomplete.html"

<RadzenText TextStyle="TextStyle.H2" TagName="TagName.H1" class="rz-pt-8">
    AutoComplete
</RadzenText>
<RadzenText TextStyle="TextStyle.Subtitle1" TagName="TagName.P" class="rz-pb-4">
    Demonstration and configuration of the Radzen Blazor <strong>AutoComplete</strong> component.
</RadzenText>

<RadzenText TextStyle="TextStyle.Subtitle2" TagName="TagName.P" class="rz-pb-4">
    These demos showcase an autocomplete input with two-way data binding, custom templates, configurable filter operators and case sensitivity, on-demand data loading, support for string lists, multiline suggestions, open-on-focus behavior, and disabled states.
</RadzenText>

<RadzenText Anchor="autocomplete#get-set-value" TextStyle="TextStyle.H5" TagName="TagName.H2" class="rz-pt-8">
    Get and Set the value of AutoComplete
</RadzenText>
<RadzenText TextStyle="TextStyle.Body1" class="rz-mb-8">
    As all Radzen Blazor input components the <strong>AutoComplete</strong> has a Value property which gets and sets the value of the component. Use <code>@@bind-Value</code> to get the user input.
</RadzenText>
<RadzenExample ComponentName="AutoComplete" Example="AutoCompleteBindValue">
    <AutoCompleteBindValue />
</RadzenExample>

<RadzenText Anchor="autocomplete#value-and-change-event" TextStyle="TextStyle.H5" TagName="TagName.H2" class="rz-pt-8">
    Get and Set the value of AutoComplete using Value and Change event
</RadzenText>
<RadzenText TextStyle="TextStyle.Body1" class="rz-mb-8">
    Value property can be used to set the value of the component and <code>Change</code> event to get the user input.
</RadzenText>
<RadzenExample ComponentName="AutoComplete" Example="AutoCompleteChangeEvent">
    <AutoCompleteChangeEvent />
</RadzenExample>

<RadzenText Anchor="autocomplete#get-selected" TextStyle="TextStyle.H5" TagName="TagName.H2" class="rz-pt-8">
    Get the selected item of AutoComplete
</RadzenText>
<RadzenText TextStyle="TextStyle.Body1" class="rz-mb-8">
    Use the <code>SelectedItem</code> property to get the currently selected item from the AutoComplete.
</RadzenText>
<RadzenExample ComponentName="AutoComplete" Example="AutoCompleteSelectedItem">
    <AutoCompleteSelectedItem />
</RadzenExample>

<RadzenText Anchor="autocomplete#placeholder" TextStyle="TextStyle.H5" TagName="TagName.H2" class="rz-pt-8">
    Define AutoComplete placeholder
</RadzenText>
<RadzenText TextStyle="TextStyle.Body1" class="rz-mb-8">
    Use the <code>Placeholder</code> property to display a hint text when the AutoComplete is empty.
</RadzenText>
<RadzenExample ComponentName="AutoComplete" Example="AutoCompletePlaceholder">
    <AutoCompletePlaceholder />
</RadzenExample>

<RadzenText Anchor="autocomplete#template" TextStyle="TextStyle.H5" TagName="TagName.H2" class="rz-pt-8">
    Define AutoComplete template
</RadzenText>
<RadzenText TextStyle="TextStyle.Body1" class="rz-mb-8">
    Use the <code>Template</code> property to customize how items are displayed in the AutoComplete dropdown.
</RadzenText>
<RadzenExample ComponentName="AutoComplete" Example="AutoCompleteTemplate">
    <AutoCompleteTemplate />
</RadzenExample>

<RadzenText Anchor="autocomplete#filter-operator" TextStyle="TextStyle.H5" TagName="TagName.H2" class="rz-pt-8">
    Change AutoComplete filter operator, case sensitivity and delay
</RadzenText>
<RadzenText TextStyle="TextStyle.Body1" class="rz-mb-8">
    Show items that <b>start with</b> a specific string, case insensitive after 100ms
</RadzenText>
<RadzenExample ComponentName="AutoComplete" Example="AutoCompleteFilterOperator">
    <AutoCompleteFilterOperator />
</RadzenExample>

<RadzenText Anchor="autocomplete#load-on-demand" TextStyle="TextStyle.H5" TagName="TagName.H2" class="rz-pt-8">
    Load data on-demand in AutoComplete and apply custom filter and sort
</RadzenText>
<RadzenText TextStyle="TextStyle.Body1" class="rz-mb-8">
    Use the <code>LoadData</code> event to load data on-demand and implement custom filtering and sorting logic.
</RadzenText>
<RadzenExample ComponentName="AutoComplete" Example="AutoCompleteLoadData">
    <AutoCompleteLoadData />
</RadzenExample>

<RadzenText Anchor="autocomplete#list-of-strings" TextStyle="TextStyle.H5" TagName="TagName.H2" class="rz-pt-8">
    AutoComplete with a List of Strings
</RadzenText>
<RadzenText TextStyle="TextStyle.Body1" class="rz-mb-8">
    AutoComplete can work directly with a list of strings without the need to define text and value properties.
</RadzenText>
<RadzenExample ComponentName="AutoComplete" Example="AutoCompleteListOfStrings">
    <AutoCompleteListOfStrings />
</RadzenExample>

<RadzenText Anchor="autocomplete#multiline" TextStyle="TextStyle.H5" TagName="TagName.H2" class="rz-pt-8">
    Multiline AutoComplete
</RadzenText>
<RadzenText TextStyle="TextStyle.Body1" class="rz-mb-8">
    Use the <code>Multiple</code> property to enable multiline AutoComplete that supports selecting multiple items.
</RadzenText>
<RadzenExample ComponentName="AutoComplete" Example="AutoCompleteWithMultilines">
    <AutoCompleteWithMultilines />
</RadzenExample>

<RadzenText Anchor="autocomplete#open-on-focus" TextStyle="TextStyle.H5" TagName="TagName.H2" class="rz-pt-8">
    Open on Focus
</RadzenText>
<RadzenText TextStyle="TextStyle.Body1" class="rz-mb-8">
    Use the <code>OpenOnFocus</code> property to automatically open the AutoComplete dropdown when the input receives focus.
</RadzenText>
<RadzenExample ComponentName="AutoComplete" Example="AutoCompleteOpenOnFocus">
    <AutoCompleteOpenOnFocus />
</RadzenExample>

<RadzenText Anchor="autocomplete#disabled-autocomplete" TextStyle="TextStyle.H5" TagName="TagName.H2" class="rz-pt-8">
    Disabled AutoComplete
</RadzenText>
<RadzenText TextStyle="TextStyle.Body1" class="rz-mb-8">
    Use <code>Disabled="true"</code> to disable the AutoComplete and prevent user interaction.
</RadzenText>
<RadzenExample ComponentName="AutoComplete" Example="AutoCompleteDisabled">
    <AutoCompleteDisabled />
</RadzenExample>

<RadzenText Anchor="autocomplete#keyboard-navigation" TextStyle="TextStyle.H5" TagName="TagName.H2" class="rz-pt-12">
    Keyboard Navigation
</RadzenText>
<RadzenText TextStyle="TextStyle.Body1" class="rz-mb-8">
    The following keys or key combinations provide a way for users to navigate and interact with Radzen Blazor AutoComplete component.
</RadzenText>

<KeyboardNavigationDataGrid Data="@shortcuts" />

@code {
    public List<KeyboardShortcut> shortcuts = new()
    {
        new KeyboardShortcut { Key = "Tab", Action = "Navigate to the component." },
        new KeyboardShortcut { Key = "DownArrow", Action = "Focus the next AutoComplete list item." },
        new KeyboardShortcut { Key = "UpArrow", Action = "Focus the previous AutoComplete list item." },
        new KeyboardShortcut { Key = "Enter", Action = "Select the focused AutoComplete list item and close the AutoComplete popup." },
        new KeyboardShortcut { Key = "Esc", Action = "Close the opened AutoComplete popup." }
    };
}
